<template>
	<view>
		<u-sticky>
			<div class="nav">
				<uni-nav-bar left-icon="back" @clickLeft="$tab.back()" :border="false" :statusBar="true" :fixed="true"
					backgroundColor="transparent" color="#FFF"></uni-nav-bar>

				<div class="wodezhihuan font-500" @click="$tab.nav(`/pages/index/substitution/mine`)">
					我的置换
				</div>
			</div>
		</u-sticky>

		<div class="px-20">
			<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :fixed="false">
				
				<div class="flex" v-for="(item,index) in list" :key="item.id">
					<image :src="item.createUserTemp.avatar" class="avatar round" mode=""></image>
					<div class="ml-16" style="width: 622rpx;">
						<div class="flex justify-between items-start">
							<div class="">
								<div class="">{{item.createUserTemp.nickName}}</div>
								<div class="text-24" style="color: #666666;">{{item.createTime}}</div>
							</div>
							
							<div class="" style="color: #999999;">
								{{hidePhoneMiddle(item.createUserTemp.phonenumber)}}
							</div>
						</div>
						
						<div class="mt-32">
							{{item.detail}}
						</div>
						
						<div class="mt-24 flex items-center">
							<image :src="globalConfig.imagePrefix + i" mode="" v-for="(i,j) in item.icons.split(',')" :key="j" class="prod"></image>
						</div>
						
						<div class="mt-32 flex items-center justify-between">
							<div class="" style="color: #FF343B;">
								<span>￥</span>
								<span class="text-36 font-500">{{item.price}}</span>
							</div>
							
							<div class="zhihuan-btn text-FFF" @click="$tab.nav(`/pages/index/substitution/release?id=${item.id}`)">
								我要置换
							</div>
						</div>
						
						<u-divider></u-divider>
					</div>
				</div>
			</s-pull-scroll>
		</div>


		<div class="release" @click="$tab.nav(`/pages/index/substitution/release`)">
			发布置换
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				globalConfig:getApp().globalData.config
			};
		},
		onLoad() {
			this.refresh()
		},
		methods: {
			async handleZhiHuan(item){
				const res = await this.$Api.substitution.mySubstitution({
					id: item.id
				})
				this.$modal.msg('提交成功!等待发布者选择!')
				this.refresh()
			},
			hidePhoneMiddle(phoneNumber) {
			    // 将电话号码转为字符串
			    phoneNumber = phoneNumber.toString();
			
			    // 确保电话号码长度足够，避免处理错误
			    if (phoneNumber.length !== 11) {
			        return "Invalid phone number";
			    }
			
			    // 隐藏中间四位
			    return phoneNumber.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
			},
			refresh() {
				this.$nextTick(() => {
					this.$refs.pullScroll.refresh();
				});
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			loadData(pullScroll) {
				setTimeout(async () => {
					if (pullScroll.page == 1) {
						this.list = [];
					}
					const res = await this.$Api.substitution.substitutionList({
						pageNum: pullScroll.page,
						pageSize: 10
					})
					
					this.list = this.list.concat(res.rows);
					
					if (this.list.length >= res.total) {
						pullScroll.finish();
					} else {
						pullScroll.success();
					}
				}, 500);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFFFFF !important;
	}

	/deep/ .uni-navbar {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	
	/deep/ .u-sticky{
		top: 0 !important;
	}
	
	.avatar{
		width: 72rpx;
		height: 72rpx;
	}

	.nav {
		height: 280rpx;
		background: url(https://file.fulewanjia.com/fulewanjia/profile/appImages3/index/substitution_nav@2x.png) no-repeat;
		background-size: 100% 100%;
		position: relative;

		.wodezhihuan {
			width: 176rpx;
			height: 72rpx;
			background: rgba(255, 255, 255, .8);
			border-radius: 72rpx 0 0 72rpx;
			position: absolute;
			top: 114rpx;
			right: 0;
			z-index: 99999;
			line-height: 72rpx;
			text-align: center;
			color: #FF353B;
		}
	}

	.release {
		width: 290rpx;
		height: 96rpx;
		background: #FF323B;
		box-shadow: 0rpx 8rpx 20rpx 0rpx #FF9095;
		border-radius: 226rpx 226rpx 226rpx 226rpx;
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
		line-height: 96rpx;
		text-align: center;
		color: #FFFFFF;
		font-weight: 500;
	}
	
	.prod{
		width: 192rpx;
		height: 192rpx;
		border-radius: 4rpx;
	}
	
	.zhihuan-btn{
		width: 200rpx;
		height: 68rpx;
		background: #FD8925;
		border-radius: 12rpx;
		line-height: 68rpx;
		text-align: center;
	}
</style>